<template>
    <el-table
        ref="tableRef"
        id="feedets-table-feedets"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        :max-height="tableHeight"
        table-layout="auto"
        @row-dblclick="onDetail"
        @sort-change="handleSortChange"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="selection" width="55" :align="'center'" />
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :formatter="col.formatter"
                :type="col.type"
                :width="col.width"
            >
                <template
                    v-if="col.formFieldItemType === 'boolean'"
                    #default="scope"
                >
                    <el-switch
                        v-model="scope.row[`${col.prop}`]"
                        :active-value="'Y'"
                        :inactive-value="'N'"
                    />
                </template>
            </el-table-column>
        </template>
    </el-table>
    <el-button-group class="bg">
        
        <el-button class="btn" type="primary" @click="onCancel"
            >撤销核销</el-button
        >
        <el-button class="btn" type="primary"  @click="onQuery"
            >查询</el-button
        >
    </el-button-group>
    <div class="page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[50, 100, 150, 200]"
            layout="sizes, prev, pager, next"
            :total="totalnum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
    <el-dialog
        v-model="dialogQueryVisible"
        title="核销查询"
        draggable
        destroy-on-close
        width="80%"
    >
        <QueryForm
            :queryItems="queryItems"
            @yh-closedialog="onCloseDialog"
        ></QueryForm>
    </el-dialog>
    <el-dialog v-model="dialogDetailVisible" title="核销明细" draggable destroy-on-close :center="true"
        width="80%">
        <AuditDetail @close="onCloseDialog" :audit-no="paramData"></AuditDetail>
    </el-dialog>
</template>
<script setup lang='ts' name="AuditCancel">
import { formatDateTime, pickQueryFromTable, transFormatter } from '@/common/tools';
import { QueryItem, TableColumn } from '@/common/types/app';
import { ElMessage, ElTable } from 'element-plus';
// import { Delete, Search } from '@element-plus/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useAppStore } from '@/store/app';
import { AuditGroupViewModel } from '@/common/types/business';
import { Request } from '@/app/request';
import {
    tableDefaultAttribute,
    useTableInfo,
    tableColumnDefault,
} from '@/hooks/useTable';
import { forEach } from 'lodash';
import AuditDetail from './AuditDetail.vue';
import { tableMaxHeightAdjust } from '@/common/const';
const tableRef = ref<InstanceType<typeof ElTable>>();
const dialogQueryVisible = ref(false);
const { client }  = storeToRefs(useAppStore());
const tableData = ref<Array<AuditGroupViewModel>>([]);
const tableHeight = ref(100);
const dialogDetailVisible = ref(false);
const paramData = ref('');
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'fee_unit_cod') {
        data = client.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'fee_unit_cod',
        label: '客户',
        formatter: onFormatter,
        
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: client.value,
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'audit_tim',
        label: '核销日期',
        formatter: formatDateTime,
        sortable: 'custom',
        formFieldItemType: 'date',
        width: 200,
    }
]);

let queryWhere = {};
const onRefresh = async () => {
    const req = new Request('核销汇总查询', {
        skip: (currentPage.value - 1) * pageSize.value,
        take: pageSize.value,
        order: orders,
        ...queryWhere,
    });
    const r = await req.post();
    
    tableData.value.length = 0;

    if (r.code > 100) {
        tableData.value = r.obj;
    }
    
};
onMounted(() => {
    tableHeight.value =
        window.innerHeight - tableMaxHeightAdjust;
})
const {
    currentPage,
    orders,
    pageSize,
    totalnum,
    handleSizeChange,
    handleCurrentChange,
    handleSortChange,
} = useTableInfo(onRefresh);
const onDetail = (row: AuditGroupViewModel) => {
    paramData.value = row.audit_no!;
    dialogDetailVisible.value = true;
};
const onCloseDialog = async (arg?: any) => {
    if (dialogDetailVisible.value) {
        dialogDetailVisible.value = false;
    }
    if (dialogQueryVisible.value) {
        // 查询
        queryWhere = arg;
        onRefresh();
        dialogQueryVisible.value = false;
    }
};
const onCancel = async () => {
    const rows: Array<AuditGroupViewModel> = tableRef.value?.getSelectionRows() || [];
    if (rows.length === 0) {
        ElMessage.info({
            message: '请选择要撤销核销',
        });
        return;
    }
    const ids = Array<string>();
    forEach(rows, (v: AuditGroupViewModel) => {
        ids.push(v.audit_no as string);
    });

    const req = new Request('核销撤销', {
        ids
    });
    const r = await req.post();
    if (r.code > 100) {
        onRefresh();
    }
}
const onQuery = () => {
    dialogQueryVisible.value = true;
};
const queryItems: Array<QueryItem> = pickQueryFromTable(tableColumns);
</script>
<style lang='scss' scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

.page {
    float: right;
    margin-top: 10px;
}
</style>